<script setup>
import { ref } from "vue";
import { useUserStore } from "@/stores/user";
import { storeToRefs } from "pinia";

const searchContent = ref("");
const userStore = useUserStore();
const {userInfo} = storeToRefs(userStore);
</script>

<template>
  <el-row class="header">
    <el-col :span="14"  class="user-info">
  <div v-if="Object.keys(userInfo).length > 0" class="username">{{ userInfo.nickname }}</div>
  <div v-else class="username"><router-link class="login" to="/login">亲，请登录</router-link>
      <router-link to="/register">免费注册</router-link></div>
</el-col>

    <el-col :span="6" class="user-container">
      <router-link to="/order">我的订单</router-link>
      <router-link to="/address">地址管理</router-link>
      <router-link to="/admin">管理平台</router-link>
    </el-col>
    <el-col :span="4" class="cart-container">
      <div class="cart">
        <router-link to="/cart">购物车</router-link>
      </div>
    </el-col>
    
  </el-row>
</template>

<style scoped lang="scss">
.header {
  height: 3.75rem;
  width: 100vw;
  line-height: 3.75rem;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  font-size: 1.25rem;
  .user-info{
    background-color: #f5f7fa;
    height: 100%;
    line-height: 3.75rem;
    .username{
      margin-left: 10rem;
      color: #333;
      .login{
        color: $xtxColor;
        margin-right: 1rem;
      }
    }
  }
  .user-container {
    height: 100%;
    background-color: #f5f7fa;
    text-align: center;
    font-weight: bold;
    a{
      margin: 0 0.625rem;
      color: #333;
    }
    }
  }

  .cart-container {
    height: 100%;
    text-align: center;
    background-color: #f5f7fa;
    .cart{
      background-color: $xtxColor;
      line-height: 2.5rem;
      width: 6.25rem;
      height: 2.5rem;
      margin: 0.625rem auto;
      a {
        display: inline-block;
        width: 100%;
        height: 100%;
        color: #fff;
      }
    }
  }
  .user-container {
    height: 100%;
    background-color: #f5f7fa;
    text-align: center;
    font-weight: bold;
    a{
      margin: 0 0.625rem;
      color: #333;
    }
  }


</style>
